<template>
  <div class="drawer">
    <!-- 遮罩层 -->
    <div v-if="drawerShow" class="mask-show" @click="close()"></div>
    <!-- 抽屉层 -->
    <div class="setbox" :class="{ show: drawerShow }">
      <div class="header">
        <div class="fl">
          <template v-if="$slots.title">
            <slot name="title"></slot>
          </template>
          <span v-else>{{ title }}</span>
        </div>
        <span class="drawer-close-icon">
          <vxe-icon name="close" roll @click="close()"></vxe-icon>
        </span>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'

const emits = defineEmits(['update:visible'])

const props = defineProps<{
  visible: boolean
  title?: string
}>()

const drawerShow = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  }
})

const close = () => {
  drawerShow.value = false
}
</script>
<style lang="less" scoped>
.drawer {
  // height: 500px;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  --vxe-primary-color: #1472ff;
  /* 遮罩 */
  .mask-show {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .setbox {
    position: fixed;
    z-index: 1100;
    top: 0px;
    bottom: 0px;
    width: 400px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #cfd8dc !important;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    // 动画（定位从 -32% 变成 0）
    right: -32%;
    padding: 0px;
    visibility: hidden;

    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid #ededed;

      .fl {
        line-height: 24px;
        font-size: 16px;
        margin-bottom: 0;
        font-weight: 700;
      }
      .drawer-close-icon {
        font-size: 14px;
        cursor: pointer;
      }
      .drawer-close-icon:hover {
        // background-color: #cadfff;
        color: var(--vxe-primary-color);
      }
    }
  }
  // 动画
  .show {
    right: 0;
    visibility: visible;
  }
}
</style>
